<template>
<!-- @wheel滚轮事件 -->
  <div v-loading='isloading' @wheel='handleWheel($event)' class="home-container" ref="container" id="Home">
    <ul @transitionend='changeValue()' class="imgLoder" :style="{marginTop:marginTop}" >
      <li v-for="item in data" :key="item.id">
          <Content :placeholder="item.midImg" :src="item.bigImg" :title="item.title" :desc="item.description"/>
      </li>
    </ul>
    <div @click="cutPage(index-1)" v-show="index>=1" class="icon up">
      <Icon type="icon-shangjiantou" />
    </div>
    <div @click="cutPage(index+1)" v-show="index<data.length-1" class="icon down">
      <Icon type="icon-xiajiantou" />
    </div>
    <ul class="dot">
      <li @click="cutPage(i)" v-for="(item,i) in data" :key="item.id" :class="{active:index==i}"></li>
    </ul>
  </div>  
</template>

<script>
import Icon from "@/components/Icon";
import Content from './content.vue'
export default {
  data() {
    return {
      index:0,
      containerHeight:0,
      changePage:false,
    };
  },
  components: {
    Icon,
    Content
  },
   created() {
   this.$store.dispatch('banners/getBanners');
  },
//   该方法专门获取ref绑定的元素
  mounted(){
      this.containerHeight=this.$refs.container.clientHeight;
    window.addEventListener("resize", this.handleResize);

  },
  computed:{
      marginTop(){
         return -this.index*this.containerHeight+'px';
      },
      isloading(){
        return this.$store.state.banners.loading;
      },
      data(){
        return this.$store.state.banners.data;
      }
  },
  methods:{
      cutPage(i){
          this.index=i
      },
      handleWheel(e){
         if(this.changePage){
             return
         }
          if(e.deltaY==125){
              if(this.index==this.datas.length-1){
                  return;
              }
              this.index++;
              this.changePage=true;
          }
           if(e.deltaY==-125){
               if(this.index==0){
                   return
               }
              this.index--;
              this.changePage=true;
          }
      },
      changeValue(){
          this.changePage=false;
      },
       handleResize() {
      this.containerHeight = this.$refs.container.clientHeight;
    },
  }
};
</script>

<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
  list-style: none;
  text-decoration: none;
}
.home-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.imgLoder{
  width: 100%;
  height: 100%;
  transition: 1s;
  li {
    width: 100%;
    height: 100%;
  }
}
.icon {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 50px;
  font-weight: bold;
  color: gray;
  cursor: pointer;
  &:hover{
    color: #fff;
  }
  &.up {
    top: 25px;
    animation: jump-up 2s infinite;
  }
  &.down {
    top: auto;
    bottom: 25px;
    animation: jump-down 2s infinite;
  }
  @jump: 5px;
  @keyframes jump-up {
    0% {
      transform: translate(-50%, @jump);
    }
    50% {
      transform: translate(-50%, -@jump);
    }
    100% {
      transform: translate(-50%, @jump);
    }
  }
  @keyframes jump-down {
    0% {
      transform: translate(-50%, -@jump);
    }
    50% {
      transform: translate(-50%, @jump);
    }
    100% {
      transform: translate(-50%, -@jump);
    }
  }
}
.dot {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: auto;
  right: 20px;
  li {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #000;
    cursor: pointer;
    margin-bottom: 10px;
    border: 1px solid #fff;
    box-sizing: border-box;
    &.active {
      background: #fff;
    }
  }
}
</style>